<script>
function set_borderStyle_a() {
	var btn_borderStyle_a = document.getElementById("btn_borderStyle_a");
	var borderStyleExState_a = false;
	btn_borderStyle_a.onclick = function() {
		if (!borderStyleExState_a) {
			borderStyle_a_Ex.style.display = "block";
			borderStyleExState_a = true;
		} else {
			borderStyle_a_Ex.style.display = "none";
			borderStyleExState_a = false;
		}
	};

	var borderStyleView_a = document.getElementById("borderStyleView_a");
	var borderStyle_a_Ex = document.getElementById("borderStyle_a_Ex");
	var lis = borderStyle_a_Ex.getElementsByTagName("li");
	for (var i = 0; i < lis.length; i++) {

		var views = lis[i].getElementsByTagName("div");
		views[0].style.backgroundColor = document
		.getElementById("colorPicker_acc").value;
		views[0].style.borderColor = document
				.getElementById("colorPicker_acbc").value;
		views[0].style.borderStyle = getText(lis[i]
				.getElementsByTagName("span")[0]);

		lis[i].onclick = function() {
			var borderStyle_a = document.getElementById("colorPicker_acbc");
			var text = this.getElementsByTagName("span");
			borderStyle_a.value = getText(text[0]);

			getStyle();
			setStyle();

			this.parentNode.style.display = "none";
			borderStyleExState_a = false;
			borderStyleView_a.style.borderStyle = getText(text[0]);
			borderStyleView_a.style.borderColor = document
					.getElementById("colorPicker_acbc").value;
			borderStyleView_a.style.backgroundColor = document
					.getElementById("colorPicker_accc").value;
		};
	}

	borderStyleView_a.style.backgroundColor = document
			.getElementById("colorPicker_acc").value;
	borderStyleView_a.style.borderColor = document
			.getElementById("colorPicker_acbc").value;
}
</script>
<fieldset
	class="box01"
	id="dCellBox">
	<legend>Default Cell</legend>
	<div class="lineSeperator">
		<form name="colorForm">
			<input
				name="colorpicker"
				type="color"
				value="#FF0000"
				onchange="newBackgroundColor(colorpicker.value);"> <input
				class="value_selected"
				name="selectedcolor"
				type="text">
		</form>
		<form name="colorForm">
			<input
				name="colorpicker"
				type="color"
				value="#FF0000"
				onchange="newBackgroundColor(colorpicker.value);"> <input
				class="value_selected"
				name="selectedcolor_b"
				type="text">
		</form>
		<form name="rangeForm">
			<input
				type="range"
				name="points"
				onmousemove="newRange(this.value);"
				min="0"
				max="10"
				step="2"
				list="richterscale"><input
				class="value_selected"
				name="selectedrange"
				type="text">
			<datalist id=richterscale>
				<option value="dotted">0</option>
				<option value="dashed">2</option>
				<option value="double">4</option>
				<option value="inset">6</option>
				<option value="outset">8</option>
				<option value="groove">10</option>

			</datalist>
		</form>
	</div>
</fieldset>
<div class="clear"></div>
<fieldset
	class="box01"
	id="panelBox">
	<legend>Panel</legend>
	<form name="colorForm">
		<input
			name="colorpicker"
			type="color"
			value="#FF0000"
			onchange="newBackgroundColor(colorpicker.value);"> <input
			class="value_selected"
			name="selectedcolor_b"
			type="text">
	</form>
	<form name="rangeForm">
		<input
			type="range"
			name="points"
			onmousemove="newRange(this.value);"
			min="0"
			max="10"
			step="2"
			list="richterscale"><input
			class="value_selected"
			name="selectedrange"
			type="text">
		<datalist id=richterscale>
			<option value="dotted">0</option>
			<option value="dashed">2</option>
			<option value="double">4</option>
			<option value="inset">6</option>
			<option value="outset">8</option>
			<option value="groove">10</option>
		</datalist>
	</form>
	<form name="colorForm">
		<input
			name="colorpicker"
			type="color"
			value="#FF0000"
			onchange="newBackgroundColor(colorpicker.value);"> <input
			class="value_selected"
			name="selectedcolor_b"
			type="text">
	</form>
	<form name="rangeForm">
		<input
			type="range"
			name="points"
			onmousemove="newRange(this.value);"
			min="0"
			max="10"
			step="2"
			list="richterscale"><input
			class="value_selected"
			name="selectedrange"
			type="text">
		<datalist id=richterscale>
			<option value="dotted">0</option>
			<option value="dashed">2</option>
			<option value="double">4</option>
			<option value="inset">6</option>
			<option value="outset">8</option>
			<option value="groove">10</option>
		</datalist>
	</form>
</fieldset>